<template>
  <div>
   <div v-if="this.userData.data !==undefined">
         <div v-if="this.userData.data.roleName==='administrator'">
           <avue-data-panel :option="option"/>
         </div>
         <div v-if="this.userData.data.roleName!=='user'">
           <el-row>
             <el-col :span="24">
             <el-card shadow="always">
               <span v-if="this.userData.data.roleName==='administrator'">商品增加数</span>
               <span v-if="this.userData.data.roleName==='store'">商店营业额</span>
           <div style="width: 1000px;height: 300px;margin: 0 auto;padding-top: 30px">
             <div style="padding-left: 65%">
               <el-date-picker
                 v-model="dateValue"
                 type="daterange"
                 align="right"
                 unlink-panels
                 range-separator="至"
                 start-placeholder="开始日期"
                 end-placeholder="结束日期"
                 :picker-options="pickerOptions"
                 @change="date"
                 format="yyyy-MM-dd"
                 value-format="yyyy-MM-dd">
               </el-date-picker>
             </div>
             <avue-echart-line :theme="this.theme" :option="options" :data="dataLine" height="300" width="1000"/>
           </div>
               </el-card>
             </el-col>
           </el-row>
         </div>
  </div>
  </div>
</template>
<script>
  import {getList} from "@/api/commodity/commodity";
  import {getUser} from "@/api/user";
  import {adminIndexCount,adminLine,storeLine} from "@/api/desk/desk";
  import { mapGetters} from "vuex";

  export default {
    data() {
      return {
        one:'',
        tow:'',
        theme:'wonderland',
        userData:{},
        item: [
          '/img/pxx1.png',
          '/img/pxxsxd.png',
          '/img/pxxqm.png',
          '/img/pxxmmm.png'
        ],
        shopdata: [],
        commodityName: '',
        option: {
          span:8,
          data: []
        },
        dateValue:'',
        dataLine:{},
        options: {
          gridX: 100,
          smooth: true,//是否顺滑
          areaStyle: true,//是否面积
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    mounted: function () {
      this.getList();
      this.getUser();
      this.oneLine();
    },

    computed: {
      ...mapGetters([
        "userInfo",
      ])
    },

    methods: {
      getUser: function () {
        getUser().then((res) => {
          this.userData={
            data:res.data.data
          };
          if (res.data.data.roleName==='administrator'){
            adminIndexCount().then((res) => {
              for ( var i=0; i<res.data.data.length; i++){
                var obj = {
                  title:res.data.data[i].name,
                  count:res.data.data[i].count,
                  icon:res.data.data[i].icon,
                  color: '#00a7d0',
                }
                this.option.data.push(obj)
              }
            })
          }
        })
      },
      oneLine: function () {
        const date1 = new Date(),
          end = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();//time1表示当前时间
        const date2 = new Date(date1);
        date2.setDate(date1.getDate()-6);
        const start = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
        this.one = start
        this.tow = end
        getUser().then((res) => {
          if (res.data.data.roleName==='administrator'){
            adminLine(start,end).then((res) => {
              this.dataLine=res.data.data;
            })
          }
          if (res.data.data.roleName==='store'){
            storeLine(start,end).then((res) => {
              this.dataLine=res.data.data;
            })
          }
        })
      },
      date(){
        let start = this.one
        let end = this.tow
        if (this.dateValue!==null){
          start = this.dateValue[0];
          end = this.dateValue[1];
        }
        if(this.userData.data !==undefined){
          if (this.userData.data.roleName==='administrator'){
            adminLine(start,end).then((res) => {
              this.dataLine=res.data.data;
            })
          }
          if (this.userData.data.roleName==='store'){
            storeLine(start,end).then((res) => {
              this.dataLine=res.data.data;
            })
          }
        }
      },
      aa() {
        console.log("进入店铺")
        this.$router.push({path: "/wel"})
      },
      search() {
        this.shopdata = [];
        var par = {
          commodityName: this.commodityName
      }
        getList(1, 10, par).then((res) => {
          for (var i = 0; i < res.data.data.records.length; i++) {
            this.shopdata.push(res.data.data.records[i]);
          }
        });
        this.commodityName = '';
      },
      commodityview(id) {
          this.$router.push({
              path: "/commodityview",
              query:{
                data:id
              }
            }
          )
        // history(id).then(() => {
        // });
      },
      getList: function () {
        if(this.shopdata === undefined || this.shopdata.length <= 0){
          getList().then((res) => {
            var page = {
              size: res.data.data.size,
              total: res.data.data.total,
              pages: res.data.data.pages
            };
            this.page = page;
            for (let i = 0; i < res.data.data.records.length; i++) {
              this.shopdata.push(res.data.data.records[i]);
            }
          });
        }
      }
    }
  }
</script>

<style>
  .el-divider--horizontal {
    margin: 12px 0 0 75% !important;
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 150px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

